<template>
  <div class="report">
    <div class="profile">
      <Profile
        v-if="reportData.recordList.length !== 0"
        :info="reportData.jianjie"
        :node="reportData.recordList"
        @clickItem="(index) => (activeTabIndex = index)"
      />
    </div>
    <div class="report-content">
      <div class="report-content-l">
        <TabSwitch :tab-list="tabContent" v-model="activeTabIndex" />
      </div>
      <div class="report-content-r">
        <WordCloud
          v-if="
            reportData.ciyun.length !== 0 &&
              (activeTabIndex === 0 ||
                activeTabIndex === 1 ||
                activeTabIndex === 3 ||
                activeTabIndex === 4)
          "
          :data="reportData.ciyun"
        />
        <Radar
          :dataArr="reportData.leidaList"
          v-if="
            reportData.leidaList.length !== 0 &&
              (activeTabIndex === 0 ||
                activeTabIndex === 1 ||
                activeTabIndex === 3 ||
                activeTabIndex === 4)
          "
        />
        <WorkStatistics
          v-if="reportData.xinzi.xAxis.length !== 0 && activeTabIndex === 3"
          :data="reportData.xinzi"
        />
        <div
          class="zs-group"
          v-if="
            Array.isArray(tabContent[2].data) &&
              tabContent[2].data.length !== 0 &&
              activeTabIndex === 2
          "
        >
          <div class="title">证书</div>
          <div class="zs">
            <el-empty
              description="暂无证书"
              v-if="
                Array.isArray(tabContent[2].data) &&
                  tabContent[2].data.length === 0
              "
            ></el-empty>
            <img
              :key="n.zhengshu_fileno"
              :src="n.zhengshu"
              v-for="n in tabContent[2].data"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Profile from "./components/Profile.vue";
import WordCloud from "./components/WordCloud.vue";
import WorkStatistics from "./components/WorkStatistics.vue";
import Radar from "./components/Radar.vue";
import TabSwitch from "./components/TabSwitch.vue";
//选项卡tab内容
import Disposition from "./components/tabContent/Disposition.vue";
import Edu from "./components/tabContent/Edu.vue";
import Info from "./components/tabContent/Info.vue";
import Invest from "./components/tabContent/Invest.vue";
import Work from "./components/tabContent/Work.vue";
import WorkShow from "./components/tabContent/WorkShow.vue";
import { TaskReport } from "@/api/task/report.js";
export default {
  data() {
    return {
      activeTabIndex: 0,
      reportData: {
        recordList: [],
        ciyun: [],
        leidaList: [],
        xinzi: { xAxis: [] },
      },
      tabContent: [
        {
          t: "个人信用信息",
          color: "#C9C570",
          components: Info,
          data: null,
        },
        {
          t: "投资与任职",
          color: "#B06260",
          components: Invest,
          data: null,
        },
        {
          t: "教育背景",
          color: "#856295",
          components: Edu,
          data: null,
        },
        {
          t: "工作履历",
          color: "#62956A",
          components: Work,
          data: null,
        },
        {
          t: "工作表现鉴定",
          color: "#62956A",
          components: WorkShow,
          data: null,
        },
        {
          t: "性格评估",
          color: "#607BB0",
          components: Disposition,
          data: null,
        },
      ],
    };
  },
  methods: {},
  mounted: function() {
    TaskReport({ taskNo: this.$route.query.id })
      .then((r) => {
        this.reportData = r;
        this.tabContent[0].data = r.xinyong; //个人信用信息概要
        this.tabContent[1].data = r.gongshangList || []; //投资与任职及法人查询
        this.tabContent[2].data = r.jiaoyuList || []; //教育
        this.tabContent[3].data = [r.lvliList || [], r.gzllList || []]; //工作履历
        this.tabContent[4].data = r.gzbxjd || []; //工作履历
      })
      .catch(() => {});
  },
  components: { Profile, WordCloud, Radar, WorkStatistics, TabSwitch },
};
</script>
<style lang="scss">
.report {
  width: 100%;
  height: 100%;
  display: flex;
  .profile {
    width: 420px;
  }
  .report-content {
    flex: 1;
    display: flex;
    .report-content-l {
      width: 55.55%;
      padding: 10px 20px;
    }
    .report-content-r {
      margin-top: 14px;
      width: 44.44%;
      .zs-group {
        .title {
          color: #fff;
          margin: 10px 0;
        }
        .zs {
          width: 100%;
          display: flex;

          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
